<template>
<div>
  <div style="padding: 20px 200px 0 200px">
    <el-row :gutter="20">
      <el-col :span="12">
        <img :src="getUrl(detailsData.shopImg)" width="100%" class="head_pic"/>
      </el-col>
      <el-col :span="12">
        <div style="font-size: 16px;font-weight: 700;color: #000;">{{detailsData.shopIntroduce}}</div>
        <div class="priceBack" style="width: 100%;height: 80px;line-height: 80px">
          <p style="padding-left: 10px;color:#999">价格<span class="price"> <span class="innerPrice">¥</span>
            {{detailsData.shopPrice}}</span><span class="tm-promo-panel">活动中</span></p>
        </div>
        <el-row style="padding: 20px 0;color: #999;font-size: 12px">
          <el-col :span="3" style="line-height: 36px">数量</el-col>
          <el-col :span="12">
            <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-col>
          <el-col :span="6" style="line-height: 36px">库存70932件</el-col>
        </el-row>
        <el-row style="padding: 20px 30px">
          <el-col :span="12">
            <el-button class="buyClass" @click="addOrder()">立即购买</el-button>
          </el-col>
          <el-col :span="12">
            <el-button class="buyClass addCart" @click="addShopCart()">加入购物车</el-button>
          </el-col>
        </el-row>
        <el-row class="footer">
          <el-col :span="5">服务承诺</el-col>
          <el-col :span="5">正品保证</el-col>
          <el-col :span="5">极速退款</el-col>
          <el-col :span="5">七天无理由退换</el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 选择地址对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="addressForm" :model="addressForm" :rules="rules" label-width="70px">
        <el-form-item label="收货地址" prop="addressPhone">
          <el-select v-model="addressForm.addressId" placeholder="请选择收货地址">
            <el-option v-for="option in addressList" :key="option.addressId"
                       :value="option.addressId" :label="option.addressText" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  <div>
    <div style="height: 200px;width: 200px;display: inline-block;text-align: center;padding-top: 50px" v-for="item in shopList">
      <img style="cursor: pointer" :src="getUrl(item.shopImg)" width="100" height="100" class="head_pic" @click="getDetails(item)"/>
      <p style="padding: 0 50px;font-size: 13px;margin: 0;color: #6c6c6c;cursor: pointer" @click="getDetails(item)">{{item.shopIntroduce}}</p>
      <div style="height: 20px;padding: 0 50px;display: flex">
        <div style="color: red;font-size: 13px;flex: 5">￥{{item.shopPrice}}</div>
        <div class="shopcart" @click="addShopCart(item)"></div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {mapGetters} from "vuex";
import {addShopping} from "@/api/book/shopping";
import {addBookorder} from "@/api/book/bookorder";
import {listAddress} from "@/api/book/address";
import {listShop} from "@/api/book/shop";
export default {
  name: "details",
  created() {
    this.detailsData=JSON.parse(window.localStorage.getItem('details'))
    this.getAddressList()
    this.categoryBooks()
  },
  data(){
    return{
      title:'',
      detailsData:null,
      num:1,
      open:false,
      // 表单参数
      addressForm:{},
      // 表单校验
      rules: {
        addressId: [
          { required: true, message: '请选择收货地址', trigger: 'change' }
        ],
      },
      //收货地址数据
      addressList:[],
      //  商品列表
      shopList:[],
    }
  },
  methods:{
    //查看商品详情
    getDetails(item){
      this.$router.push({ path: this.redirect || "/bookDisplay/empty" }).catch(()=>{});
      window.localStorage.setItem('details',JSON.stringify(item))
    },
    /**详情 */
    categoryBooks(){
      listShop({categoryId:this.detailsData.categoryId}).then(response => {
        this.shopList = response.rows;
      });
    },
    //获取收货地址数据
    getAddressList(){
      listAddress(this.queryParams).then(response => {
        this.addressList = response.rows;
      });
    },
    // 表单重置
    reset() {
      this.addressForm = {
        addressId: null
      };
      this.resetForm("form");
    },
    //选择收货地址
    submitForm(){
      this.$refs["addressForm"].validate(valid => {
        if (valid) {
          addBookorder({
            shopIds:this.detailsData.shopId+'',
            shopNums:this.num+'',
            addressId:this.addressForm.addressId
          }).then(response => {
            this.msgSuccess("购买成功");
            // this.getList();
          });
          this.open = false;
          // this.getList();
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /**立即购买 */
    addOrder(){
      this.$confirm('是否确认立即购买?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.open=true
      }).catch(function() {
      });
    },
    // 加入购物车
    addShopCart(){
      addShopping(this.detailsData).then(response => {
        this.msgSuccess("新增成功");
        // this.$router.push({ path: this.redirect || "/bookDisplay/details" }).catch(()=>{});
      });
    },
    //图片路径
    getUrl(data){
      return  process.env.VUE_APP_BASE_API+"/"+data
    },
  }
}
</script>

<style scoped>
.el-select{
  width: 100%;
}
.priceBack{
  background-image: url("../../../../assets/images/back.jpg");
}
.price{
  padding-left: 20px;
  vertical-align: middle;
  font-size: 30px;
  color: #FF0036;
  font-weight: bolder;
  font-family: Arial;
}
.innerPrice{
  font-size: 18px;
}
.tm-promo-panel{
  background-color: #f47a86;
  border-radius: 1px;
  color: #fff;
  height: 16px;
  line-height: 16px;
  margin: 0 2px 4px 6px;
  padding: 1px 5px;
  position: relative;
}
.footer{
  color: #999;
  font-size: 12px;
}
.buyClass{
  margin-right: 0;
  float: left;
  overflow: hidden;
  position: relative;
  width: 178px;
  background-color: #ffeded;
  border: 1px solid #FF0036;
  color: #FF0036;
  font-family: 'Microsoft Yahei';
}
.addCart{
  background-color: #ff0036;
  border: 1px solid #ff0036;
  color: #fff;
}
</style>
